﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Register</title>
    <!-- google font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/ionicons.css" rel="stylesheet" type="text/css">
    <link href="assets/css/simple-line-icons.css" rel="stylesheet" type="text/css">
    <link href="assets/css/jquery.mCustomScrollbar.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
</head>

<body class="wrapper">
    <div class="sufee-login d-flex align-content-center flex-wrap">
        <div class="container">
            <div class="login-content">
                <div class="logo">
                    <a href="#">
                        <strong class="logo_icon">
                            <img alt="" src="assets/images/small-logo.png" alt="">
                        </strong>
                        <span class="logo-default">
                            <img alt="" src="assets/images/logo.png" alt="">
                        </span>
                    </a>
                </div>
                <div class="login-form">
                    <form>
                        <div class="form-group">
                            <label>用户名</label>
                            <input id = "username" type="text" class="form-control" placeholder="用户名">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input id = "password" type="password" class="form-control" placeholder="密码">
                        </div>
                        <div class="form-group">
                            <label>确认密码</label>
                            <input id = "confirmPwd" type="password" class="form-control" placeholder="确认密码">
                        </div>
                        <div class="form-group">
                            <label>职位</label>
                            <select class="form-control" id="position">
                                <option>医生</option>
                                <option>护士</option>
                                <option>咨询</option>
                                <option>前台</option>
                                <option>其他</option>
                            </select>
                        </div>
                        <button id = "register22" type="submit" 
                        class="btn btn-success btn-flat m-b-30 m-t-30">注册</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/popper.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="assets/js/custom.js" type="text/javascript"></script>
    <script type="text/javascript">
		 
		//点击id为register的button后实现function()
		$("#register22").on("click", function(){
			var username = $("#username").val();
			var password = $("#password").val();
            var confirmPwd = $("#confirmPwd").val();
            var position = $("#position").val();

			if (username == null || username == "") {
				alert("用户名不能为空");
				return false;
			}
			if (password == null || password == "") {
				alert("密码不能为空");
				return false;
			}
            if (confirmPwd == null || confirmPwd == "") {
				alert("确认密码不能为空");
				return false;
			}
            // form提交
            axios.defaults.withCredentials = true;
			$.ajax({
				//对应后端requestMapping中的method
				type :"POST",
				//后端地址requestMapping
				url: "http://localhost:8090/user/register",
				//后端方法传入参数
				data: {
					"username": username,
					"password": password,
                    "confirmPwd": confirmPwd,
                    "position": position
				},
				//允许跨域请求
				xhrFields: {withCredentials: true},
				//回调：ajax请求成功，后端方法返回的json数据为data
				success: function(data){
					if (data.status == 200) {
						alert("注册成功");
						window.location.href = "page-login.html";
					} else{
						alert(data.msg);
					}
				},
				//回调：ajax请求失败
				error: function(data){
					alert("注册失败,ajax请求失败");
				}
			});
			//注意 button 自定义 click 方法后，该方法内应该返回 false，因为使用 ajax 发送请求处理业务，不需要常见的事件冒泡给 form 提交 POST 方法。
			return false;
		});
    </script>
</body>

</html>
